<script setup lang="ts" name="PersonalRegister">
import { ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import StepIndicator from './components/StepIndicator.vue'
import { useRegister } from './composables/useRegister'

const {
	currentStep,
	loading,
	sendingCode,
	countdown,
	formData,
	steps,
	sendVerifyCode,
	startFaceVerify,
	nextStep,
	prevStep,
	completeRegister
} = useRegister()

// 表单引用
const phoneFormRef = ref<FormInstance>()
const idFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

// 表单验证规则
const phoneRules: FormRules = {
	phone: [
		{
			required: true,
			message: '请输入手机号码',
			trigger: 'blur'
		},
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入正确的手机号码',
			trigger: 'blur'
		}
	],
	verifyCode: [
		{
			required: true,
			message: '请输入验证码',
			trigger: 'blur'
		},
		{
			pattern: /^\d{4}$/,
			message: '请输入4位验证码',
			trigger: 'blur'
		}
	]
}

const idRules: FormRules = {
	realName: [
		{
			required: true,
			message: '请输入真实姓名',
			trigger: 'blur'
		},
		{
			min: 2,
			max: 20,
			message: '姓名长度在 2 到 20 个字符',
			trigger: 'blur'
		}
	],
	idCard: [
		{
			required: true,
			message: '请输入身份证号码',
			trigger: 'blur'
		},
		{
			pattern: /^\d{17}[\dXx]$/,
			message: '请输入正确的身份证号码',
			trigger: 'blur'
		}
	]
}

const passwordRules: FormRules = {
	password: [
		{
			required: true,
			message: '请输入密码',
			trigger: 'blur'
		},
		{
			min: 8,
			message: '密码长度不能少于8位',
			trigger: 'blur'
		},
		{
			pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
			message: '密码必须包含大小写字母和数字',
			trigger: 'blur'
		}
	],
	confirmPassword: [
		{
			required: true,
			message: '请再次输入密码',
			trigger: 'blur'
		},
		{
			validator: (rule, value, callback) => {
				if (value !== formData.password) {
					callback(new Error('两次输入密码不一致'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	]
}

// 步骤1：手机验证
const handlePhoneNext = async () => {
	await phoneFormRef.value?.validate()
	nextStep()
}

// 步骤2：身份信息验证
const handleIdNext = async () => {
	await idFormRef.value?.validate()
	nextStep()
}

// 步骤4：密码设置完成
const handlePasswordNext = async () => {
	await passwordFormRef.value?.validate()
	await completeRegister()
}

// 返回登录页
const goToLogin = () => {
	window.location.href = '/login'
}
</script>

<template>
	<div class="min-h-screen bg-gray-100">
		<!-- 步骤指示器 -->
		<StepIndicator
			:steps="steps"
			:current-step="currentStep"
		/>

		<!-- 主要内容区域 -->
		<div class="flex justify-center px-4">
			<div class="w-full max-w-lg bg-white rounded-2xl shadow-lg p-8 -mt-4 relative z-10">
				<!-- 步骤1：手机号验证 -->
				<div v-if="currentStep === 1">
					<div class="text-center mb-8">
						<h2 class="text-xl font-medium text-gray-900 mb-2">个人用户注册</h2>
						<p class="text-sm text-gray-500">
							已有账号？
							<a
								href="/login"
								class="text-blue-500 hover:text-blue-600"
								>立即登录</a
							>
						</p>
					</div>

					<div class="text-right mb-6">
						<div class="bg-blue-50 text-blue-600 text-sm px-4 py-2 rounded">注册说明</div>
					</div>

					<el-form
						ref="phoneFormRef"
						:model="formData"
						:rules="phoneRules"
						size="large"
					>
						<el-form-item prop="phone">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
								<el-input
									v-model="formData.phone"
									placeholder="17826078582"
									class="w-full"
								/>
							</div>
						</el-form-item>

						<el-form-item prop="verifyCode">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">短信验证码</label>
								<div class="flex gap-3">
									<el-input
										v-model="formData.verifyCode"
										placeholder="1234"
										class="flex-1"
									/>
									<el-button
										type="primary"
										:loading="sendingCode"
										:disabled="countdown > 0"
										@click="sendVerifyCode"
									>
										{{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
									</el-button>
								</div>
							</div>
						</el-form-item>

						<el-button
							type="primary"
							size="large"
							class="w-full mt-4"
							@click="handlePhoneNext"
						>
							下一步
						</el-button>
					</el-form>
				</div>

				<!-- 步骤2：身份信息验证 -->
				<div v-else-if="currentStep === 2">
					<div class="text-center mb-8">
						<h2 class="text-xl font-medium text-gray-900 mb-2">个人用户注册</h2>
						<p class="text-sm text-gray-500">
							已有账号？
							<a
								href="/login"
								class="text-blue-500 hover:text-blue-600"
								>立即登录</a
							>
						</p>
					</div>

					<el-form
						ref="idFormRef"
						:model="formData"
						:rules="idRules"
						size="large"
					>
						<el-form-item prop="realName">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">真实姓名</label>
								<el-input
									v-model="formData.realName"
									placeholder="ciyu"
									class="w-full"
								/>
							</div>
						</el-form-item>

						<el-form-item prop="idCard">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">身份证号码</label>
								<el-input
									v-model="formData.idCard"
									placeholder="500234189202221324"
									class="w-full"
								/>
							</div>
						</el-form-item>

						<div class="bg-orange-50 p-4 rounded-lg mb-6">
							<h4 class="text-orange-800 font-medium mb-2">温馨提示：</h4>
							<ul class="text-orange-700 text-sm space-y-1">
								<li>• 请输入真实的姓名和身份证号码</li>
								<li>• 身份信息将用于实名认证</li>
								<li>• 您的个人信息将被严格保密</li>
							</ul>
						</div>

						<div class="flex gap-3">
							<el-button
								size="large"
								class="flex-1"
								@click="prevStep"
							>
								上一步
							</el-button>
							<el-button
								type="primary"
								size="large"
								class="flex-1"
								@click="handleIdNext"
							>
								下一步
							</el-button>
						</div>
					</el-form>
				</div>

				<!-- 步骤3：人脸验证 -->
				<div v-else-if="currentStep === 3">
					<div class="text-center mb-8">
						<h2 class="text-xl font-medium text-gray-900 mb-2">个人用户注册</h2>
						<p class="text-sm text-gray-500">
							已有账号？
							<a
								href="/login"
								class="text-blue-500 hover:text-blue-600"
								>立即登录</a
							>
						</p>
					</div>

					<div class="text-center">
						<h3 class="text-lg font-medium text-gray-900 mb-4">人脸验证</h3>
						<p class="text-sm text-gray-600 mb-8">请进行人脸识别验证</p>

						<!-- 人脸验证区域 -->
						<div class="mb-8">
							<div
								v-if="formData.faceVerifyStatus === 'pending' && !loading"
								class="w-40 h-40 mx-auto border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center"
							>
								<div class="text-center">
									<div class="w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center">📷</div>
									<p class="text-sm text-gray-500">点击开始验证</p>
								</div>
							</div>

							<!-- 验证中状态 -->
							<div
								v-else-if="loading"
								class="w-40 h-40 mx-auto bg-green-50 border-2 border-green-200 rounded-lg flex flex-col items-center justify-center"
							>
								<div class="w-16 h-16 border-4 border-green-200 border-t-green-500 rounded-full animate-spin mb-2" />
								<p class="text-sm text-green-600">验证中...</p>
							</div>

							<!-- 验证成功状态 -->
							<div
								v-else-if="formData.faceVerifyStatus === 'success'"
								class="w-40 h-40 mx-auto bg-green-50 border-2 border-green-200 rounded-lg flex flex-col items-center justify-center"
							>
								<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mb-2">
									<svg
										class="w-8 h-8 text-white"
										fill="currentColor"
										viewBox="0 0 20 20"
									>
										<path
											fill-rule="evenodd"
											d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
											clip-rule="evenodd"
										/>
									</svg>
								</div>
								<p class="text-sm text-green-600 font-medium">人脸验证成功</p>
							</div>
						</div>

						<!-- 验证提示 -->
						<div class="bg-orange-50 p-4 rounded-lg mb-6">
							<h4 class="text-orange-800 font-medium mb-2">验证须知：</h4>
							<ul class="text-orange-700 text-sm space-y-1 text-left">
								<li>• 请确保光线充足，正对摄像头</li>
								<li>• 请摘下眼镜、帽子等遮挡物</li>
								<li>• 请保持面部清晰可见</li>
							</ul>
						</div>

						<div class="flex gap-3">
							<el-button
								size="large"
								class="flex-1"
								@click="prevStep"
							>
								上一步
							</el-button>
							<el-button
								v-if="formData.faceVerifyStatus !== 'success'"
								type="primary"
								size="large"
								class="flex-1"
								:loading="loading"
								@click="startFaceVerify"
							>
								开始验证
							</el-button>
							<el-button
								v-else
								type="primary"
								size="large"
								class="flex-1"
								@click="nextStep"
							>
								下一步
							</el-button>
						</div>
					</div>
				</div>

				<!-- 步骤4：设置密码 -->
				<div v-else-if="currentStep === 4">
					<div class="text-center mb-8">
						<h2 class="text-xl font-medium text-gray-900 mb-2">个人用户注册</h2>
						<p class="text-sm text-gray-500">
							已有账号？
							<a
								href="/login"
								class="text-blue-500 hover:text-blue-600"
								>立即登录</a
							>
						</p>
					</div>

					<div class="text-center mb-8">
						<h3 class="text-lg font-medium text-gray-900 mb-2">设置登录密码</h3>
						<p class="text-sm text-gray-600">请设置您的登录密码</p>
					</div>

					<el-form
						ref="passwordFormRef"
						:model="formData"
						:rules="passwordRules"
						size="large"
					>
						<el-form-item prop="password">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">登录密码</label>
								<el-input
									v-model="formData.password"
									type="password"
									placeholder="请输入密码 (8位以上，包含大小写字母和数字)"
									class="w-full"
									show-password
								/>
							</div>
						</el-form-item>

						<el-form-item prop="confirmPassword">
							<div class="w-full">
								<label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
								<el-input
									v-model="formData.confirmPassword"
									type="password"
									placeholder="请再次输入密码"
									class="w-full"
									show-password
								/>
							</div>
						</el-form-item>

						<div class="bg-blue-50 p-4 rounded-lg mb-6">
							<h4 class="text-blue-800 font-medium mb-2">密码要求：</h4>
							<ul class="text-blue-700 text-sm space-y-1">
								<li>• 密码长度为8-20位</li>
								<li>• 必须包含大写字母、小写字母和数字</li>
								<li>• 建议使用字母、数字和符号的组合</li>
							</ul>
						</div>

						<div class="flex gap-3">
							<el-button
								size="large"
								class="flex-1"
								@click="prevStep"
							>
								上一步
							</el-button>
							<el-button
								type="primary"
								size="large"
								class="flex-1"
								:loading="loading"
								@click="handlePasswordNext"
							>
								完成注册
							</el-button>
						</div>
					</el-form>
				</div>

				<!-- 步骤5：注册完成 -->
				<div
					v-else-if="currentStep === 5"
					class="text-center"
				>
					<div class="mb-8">
						<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
							<svg
								class="w-10 h-10 text-green-500"
								fill="currentColor"
								viewBox="0 0 20 20"
							>
								<path
									fill-rule="evenodd"
									d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
									clip-rule="evenodd"
								/>
							</svg>
						</div>
						<h2 class="text-2xl font-medium text-gray-900 mb-2">注册成功！</h2>
						<p class="text-gray-600">恭喜您已成功注册体育公共服务系统</p>
					</div>

					<div class="bg-gray-50 p-6 rounded-lg mb-8 text-left">
						<h4 class="text-gray-900 font-medium mb-4">您的注册信息</h4>
						<div class="space-y-3 text-sm">
							<div class="flex justify-between">
								<span class="text-gray-600">手机号：</span>
								<span class="text-gray-900">{{ formData.phone }}</span>
							</div>
							<div class="flex justify-between">
								<span class="text-gray-600">真实姓名：</span>
								<span class="text-gray-900">{{ formData.realName }}</span>
							</div>
							<div class="flex justify-between">
								<span class="text-gray-600">身份证号：</span>
								<span class="text-gray-900">{{ formData.idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2') }}</span>
							</div>
							<div class="flex justify-between">
								<span class="text-gray-600">人脸验证：</span>
								<span class="text-green-600">已完成</span>
							</div>
						</div>
					</div>

					<div class="bg-blue-50 p-4 rounded-lg mb-8">
						<h4 class="text-blue-800 font-medium mb-2">温馨提示：</h4>
						<ul class="text-blue-700 text-sm space-y-1 text-left">
							<li>• 请妥善保管您的账号和密码</li>
							<li>• 您可以使用手机号登录系统</li>
							<li>• 如有问题，请联系客服：12345</li>
						</ul>
					</div>

					<div class="flex gap-3">
						<el-button
							size="large"
							class="flex-1"
							@click="goToLogin"
						>
							返回首页
						</el-button>
						<el-button
							type="primary"
							size="large"
							class="flex-1"
							@click="goToLogin"
						>
							立即登录
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
/* 自定义样式覆盖 */
:deep(.el-input__wrapper) {
	padding: 12px 16px;
	border-radius: 8px;
}
:deep(.el-button) {
	font-weight: 500;
	border-radius: 8px;
}
:deep(.el-button--large) {
	padding: 12px 24px;
	font-size: 16px;
}
</style>
